<template>
  <div>
    <div class="top">
      <el-button
        type="primary"
        :disabled="selectFileIdList.length == 0"
        @click="revertBatch"
      >
        <span class="iconfont icon-revert"></span>
        还原</el-button
      >
      <el-button :disabled="selectFileIdList.length == 0" @click="delBatch">
        <span class="iconfont icon-del"></span>
        批量删除</el-button
      >
    </div>
    <div class="file-list">
      <Table
        ref="dataTableRef"
        :columns="columns"
        :dataSource="tableData"
        :fetch="loadDataList"
        :initFetch="true"
        :options="tableOptions"
        :showPageSize="false"
        @rowSelected="rowSelected"
      >
        <!-- 文件名 -->
        <template #fileName="{ row }">
          <div
            class="file-item"
            @mouseenter="showOp(row)"
            @mouseleave="cancelShowOp(row)"
          >
            <template
              v-if="
                (row.fileType == 3 || row.fileType == 1) && row.status !== 0
              "
            >
              <Icon :cover="row.fileCover"></Icon>
            </template>
            <template v-else>
              <Icon v-if="row.folderType == 0" :fileType="row.fileType"></Icon>
              <Icon v-if="row.folderType == 1" :fileType="0"></Icon>
            </template>
            <span class="file-name" :title="row.fileName">{{
              row.fileName
            }}</span>

            <span class="op">
              <template v-if="row.showOp">
                <span class="iconfont icon-link" @click="revert(row)"
                  >还原</span
                >
                <span class="iconfont icon-del" @click="delFile(row)"
                  >删除</span
                >
              </template>
            </span>
          </div>
        </template>
        <!-- 删除时间 -->
        <template #recoveryTime="{ row }">
          <span>{{ row.recoveryTime }}</span>
        </template>

        <!-- 大小 -->
        <template #fileSize="{ row }">
          <span>{{ row.fileSize?proxy.sizeToStr.size2Str(row.fileSize):"" }}</span>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { LoadRecycleList, RecoverFile, DelFile } from "@/api/recycle";
const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
  },
  {
    label: "删除时间",
    prop: "recoveryTime",
    scopedSlots: "recoveryTime",
    width: 300,
  },
  {
    label: "大小",
    prop: "fileSize",
    scopedSlots: "fileSize",
    width: 300,
  },
];

const tableData = ref({});
const tableOptions = {
  extHeight: 20,
  selectType: "checkbox",
};
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
  };
  if (params.category !== "all") {
    delete params.filePid;
  }
  let result = await LoadRecycleList(params);
  if (!result) {
    return;
  }
  tableData.value = result.data;
};
// 多选
const selectFileIdList = ref([]);
const rowSelected = (rows) => {
  selectFileIdList.value = [];
  rows.forEach((item) => {
    selectFileIdList.value.push(item.fileId);
  });
};
// 展示row操作
const showOp = (row) => {
  tableData.value.list.forEach((item) => {
    item.showOp = false;
  });
  row.showOp = true;
};
// row操作消失
const cancelShowOp = (row) => {
  row.showOp = false;
};

// 恢复文件
const revert = (row) => {
  proxy.Confirm(`你确定要还原【${row.fileName}】吗？`, async () => {
    let params = {
      fileIds:row.fileId,
    };
    let result = await RecoverFile(params);
    if(!result){
      return;
    }
    proxy.Message.success("还原成功~")
    loadDataList();
  });
};

// 恢复文件
const revertBatch = () => {
  proxy.Confirm(`你确定要还原这些文件吗？`, async () => {
    let params = {
      fileIds:selectFileIdList.value.join(","),
    };
    let result = await RecoverFile(params);
    if(!result){
      return;
    }
    proxy.Message.success("还原成功~")
    loadDataList();
  });
};
//  删除文件
const emit = defineEmits(["reload"])
const delFile = (row) => {
  proxy.Confirm(`你确定要删除【${row.fileName}】吗？`, async () => {
    let params = {
      fileIds:row.fileId,
    };
    let result = await DelFile(params);
    if(!result){
      return;
    }
    proxy.Message.success("删除成功~")
    loadDataList();
    emit("reload");
  });
};
// 批量
const delBatch = () => {
  proxy.Confirm(`你确定要删除这些文件吗？删除后无法恢复!`, async () => {
    let params = {
      fileIds:selectFileIdList.value.join(","),
    };
    let result = await DelFile(params);
    if(!result){
      return;
    }
    proxy.Message.success("删除成功~")
    loadDataList();
    emit("reload");
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/fileList.scss";
.file-list {
  margin-top: 10px;
  .file-item {
    .op {
      width: 120px;
    }
  }
}
</style>